<template>
  <Modal :title="getTitle">
    <div class="flex justify-stretch">
      <div class="items-centers flex flex-col justify-center">
        <a-image
          class="rounded-md"
          :width="260"
          :preview="false"
          :src="info.thumbnail"
        />
      </div>
      <a-descriptions class="ml-4 flex-1" :column="2" bordered>
        <a-descriptions-item :labelStyle="desc.labelStyle" label="书名">{{
          info.bookName
        }}</a-descriptions-item>
        <a-descriptions-item :labelStyle="desc.labelStyle" label="作者">{{
          info.author
        }}</a-descriptions-item>

        <a-descriptions-item :labelStyle="desc.labelStyle" label="出版社">{{
          info.publisher
        }}</a-descriptions-item>
        <a-descriptions-item :labelStyle="desc.labelStyle" label="出版时间">{{
          info.publishTime
        }}</a-descriptions-item>
        <a-descriptions-item :labelStyle="desc.labelStyle" label="定价(￥)">{{
          info.price
        }}</a-descriptions-item>
        <a-descriptions-item :labelStyle="desc.labelStyle" label="页数">{{
          info.pages
        }}</a-descriptions-item>
        <a-descriptions-item :labelStyle="desc.labelStyle" label="位置">{{
          info.location
        }}</a-descriptions-item>
        <a-descriptions-item :labelStyle="desc.labelStyle" label="备注">
          {{ info.mark }}
        </a-descriptions-item>
        <a-descriptions-item
          :labelStyle="desc.labelStyle"
          label="简介"
          :span="2"
        >
          {{ info.introduction }}
        </a-descriptions-item>
      </a-descriptions>
    </div>
  </Modal>
</template>

<script lang="ts" setup>
defineOptions({
  name: 'DictModel',
});
import { ref, computed } from 'vue';
import { useVbenModal } from '@vben/common-ui';
import { handleBookName } from '#/utils/tools';

const emit = defineEmits(['success']);

// 弹窗标题
const info = ref<any>({});
const getTitle = computed(() => {
  return `${handleBookName(info.value?.bookName)}`;
});

const [Modal, modalApi] = useVbenModal({
  draggable: true,
  footer: false,
  class: 'w-2/3',
  onConfirm: () => onSubmit,
});

const desc = {
  labelStyle: {
    width: '120px',
  },
  contentStyle: {
    minHeight: '100px',
  },
};

//  提交
const onSubmit = (values: Record<string, any>) => {
  return;
  // const { valid } = await formApi.validate();
  // if (!valid) return;
  // let query = info.value?.dictId ? dictEdit : dictSave;
  // let res: any = await query({ ...values });
  // console.log(res);
  // message.success(res.message);
  // modalApi.close();
  // emit('success');
};

// 打开弹窗
const open = (data: any) => {
  info.value = data;
  modalApi.open();
};

defineExpose({
  open,
});
</script>

<style lang="scss" scoped></style>
